class Tab {
    constructor(id) {
        this.tab = document.querySelector('#' + id)
        this.lis = this.tab.querySelectorAll('ul li')
        this.sections = this.tab.querySelectorAll('section')
        // 获取按钮
        this.btn = this.tab.querySelector('.tabadd')
        // 获取li元素的父盒子ul
        this.ul = this.tab.querySelector('.fisrstnav ul')
        // 获取section的父盒子
        this.tabscon = this.tab.querySelector('.tabscon')
        // 获取删除按钮
        this.del = this.tab.querySelectorAll('.iconfont')
    }

    新方法() {
        this.lis = this.tab.querySelectorAll('ul li')
        this.sections = this.tab.querySelectorAll('section')
        this.del = this.tab.querySelectorAll('.iconfont')
        this.span = document.querySelectorAll('.fisrstnav li span:first-child')
        
    }

    // 构造方法的this指向实例化对象,普通方法this指向方法调用者
    inint() {
        this.新方法()
        // 注册事件
        for (var i = 0; i < this.lis.length; i++) {
            // 添加自定义属性
            this.lis[i].index = i
            this.lis[i].onclick = this.toggleTab.bind(this.lis[i],this)
            // this.lis[i].ondblclick = this.editTab
            this.del[i].onclick = this.removeTab.bind(this.del[i],this)
            this.span[i].ondblclick = this.editTab
            this.sections[i].ondblclick = this.editTab
        }
        // 注册点击事件
        this.btn.onclick = this.addTab.bind(this.btn,this)
    }

    // 添加功能
    addTab(that) {
        that.clearClass()
        var sj = Math.random()
        // 创建li元素
        var liHtml = '<li class="liactive"><span>新选项</span><span class="iconfont icon-guanbi"></span></li>'
        var sectionHtml = `<section class="conactive">${sj}</section>`
        // 把创建的li添加到父盒子最后面
        that.ul.insertAdjacentHTML('beforeend', liHtml)
        that.tabscon.insertAdjacentHTML('beforeend', sectionHtml)
        that.inint()
    }

    // 切换功能
    toggleTab(that) {
        // 封装的清除样式的类   排他思想
        that.clearClass();
        // 给每个点击的li添加liactive类名
        this.className = 'liactive'
        // 给每个相应的section添加一个conactive的类名
        that.sections[this.index].className = 'conactive'
    }

    // 清除类
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            // 清除所有li的样式
            this.lis[i].className = ''
            // 清除所有section的样式
            this.sections[i].className = ''
        }
    }

    // 删除功能
    removeTab(that, e) {
        e.stopPropagation()
        var index = this.parentNode.index;
        // console.log(index);
        that.lis[index].remove();
        // this.parentNode.remove()
        that.sections[index].remove()
        that.inint()

        // 当我们删除的不是选定状态,原来的选定状态保持不变
        if (document.querySelector('.liactive')) {
            return
        }
        if (index === 0) {
            that.lis[index] && that.lis[index].click();
        }
        // that.lis[index] && that.lis[index++].click();
        // 当我们删除的是选定状态,让前一个为选定状态
        index--;
        // 短路运算符
        // 如果左边是真的,才会判断执行右边,如果左边是假的,右边不执行
        that.lis[index] && that.lis[index].click(); //自动进行点击事件

    }

    // 修改功能
    editTab() {
        // 获取span里面的内容
        var value = this.innerHTML
        // 在span里面添加一个文本框  把span的文字给文本框
        this.innerHTML = `<input type="text" value="${value}">`
        // 获取文本框
        var inp = this.querySelector('input')
        inp.select(); // 选中文本
        inp.ondblclick = function (e) {
            e.stopPropagation()
        }
        inp.onblur = function () {
            this.parentNode.innerHTML = this.value
        }
        inp.onkeydown = function (e) {
            if(e.keyCode === 13) {
                this.blur()
            }
        }
        // console.log(this);
    }
}

var tab = new Tab('tab')
tab.inint()